<template>
  <div class="page">
    <div class="page-search">
      <van-row type="flex" justify="space-between" class="mid">
        <van-col span="18" class="mid">
          <van-search
            class="w100"
            clearable
            v-model="searchData.search"
            shape="round"
            background="#f2f2f2"
            placeholder="请输入"
            @search="onRefresh"
          />
        </van-col>
        <van-col span="6" offset="" class="mid">
          <div class="page-search-option" @click="moduleAction('residentAdd')">
            <div class="w100">更多</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="page-list">
      <van-empty v-show="dataList.length <= 0" description="" />
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :error.sync="errorLoading"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="page-list-item"
            v-for="(item, index) in dataList"
            :key="index"
            @click="itemAction(item, index)"
          >
            <div
              class="page-list-item-inner mid"
              :class="{ 'item-active': item.isChecked }"
            >
              <!-- <div class="edit mid" @click.stop="editAction(item)">
                <van-icon class="edit-icon" name="edit" color="#ffffff" size="20"/>
              </div> -->
              <van-row type="flex" justify="space-between" class="w100">
                <van-col span="22" offset="1" class="">
                  <van-row type="flex" justify="start" class="w100">
                    <van-col span="24" class="mid bold">
                      {{ item.name }}
                      <div class="tag">
                        {{ item.relationship_name }}
                      </div>
                    </van-col>
                  </van-row>
                  <div class="desc">{{ item.card_no }}</div>
                  <div class="page-list-item-inner-bottom">
                    <van-button
                      class="page-list-item-inner-bottom-btn"
                      size="small"
                      color="#D58913"
                      type="info"
                      text="修改"
                      @click="editAction(item)"
                    />
                  </div>
                </van-col>
                <!-- <van-col span="2" offset="1" class="mid">
                  <img :src="url.icon_arrow_right" height="16" width="8" alt="箭头" />
                </van-col> -->
              </van-row>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <div class="bottom-bar">
      <van-button
        class="bottom-bar-btn"
        block
        size="large"
        color="#D58913"
        type="info"
        text="确认选择"
        @click.stop="moduleAction('submit')"
      />
    </div>
  </div>
</template>

<script>
import { getResidentList } from '@/api/school'

export default {
  data() {
    return {
      url: {
        icon_arrow_right: require('../../assets/images/school/icon_arrow_golden.png'),
      },
      route: {},
      page: {
        num: 1,
        total: 0,
      },
      searchData: {},
      loading: true,
      errorLoading: false,
      finished: false,
      refreshing: false,
      dataList: [],
      checkedList: [],
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.route = this.$route.query
    const childrenType = localStorage.getItem('childrenType')
    switch (childrenType) {
      case 'family':
        document.title = '共同居住人列表'
        break
      case 'colleger':
        document.title = '大学生宿舍人员列表'
        break
      case 'nonColleger':
        document.title = '非大学生宿舍人员列表'
        break
      default:
        document.title = '共同居住人列表'
        break
    }
    this.init()
  },
  methods: {
    init() {
      if (
        (this.route.page_type == 'children' &&
          (!this.route.parent_id || !this.route.student_id)) ||
        (this.route.page_type == 'teacher' && !this.route.teacher_id) ||
        (this.route.page_type == 'worker' && !this.route.workers_id)
      ) {
        this.$toast('缺少参数')
        return
      }
      this.loading = true
      this.onLoad()
    },
    moduleAction(type) {
      switch (type) {
        case 'submit':
          if (this.checkedList.length == 0) {
            this.$toast('请选择共同居住人')
            return
          }
          let checkedArr = []
          this.dataList.forEach((item) => {
            if (item.isChecked)
              checkedArr.push({ id: item.id, name: item.name })
          })
          localStorage.setItem('residentList', JSON.stringify(checkedArr))
          this.$router.push({
            path: '/school/health',
            query: {
              type: this.route.page_type,
              parent_id: this.route.parent_id,
              student_id: this.route.student_id,
              teacher_id: this.route.teacher_id,
              workers_id: this.route.workers_id,
              cohabitation_id: this.checkedList.join(','),
            },
          })
          break
        case 'residentAdd':
          this.$router.push({
            path: '/school/resident',
            query: {
              parent_id: this.route.parent_id,
              student_id: this.route.student_id,
              teacher_id: this.route.teacher_id,
              workers_id: this.route.workers_id,
            },
          })
          break
      }
    },
    editAction(item) {
      this.$router.push({
        path: '/school/resident',
        query: {
          parent_id: this.route.parent_id,
          student_id: this.route.student_id,
          teacher_id: this.route.teacher_id,
          workers_id: this.route.workers_id,
          id: item.id,
        },
      })
    },
    itemAction(item, index) {
      let isHas = this.checkedList.find((e) => e === item.id)
      if (!isHas) {
        this.checkedList.push(item.id)
        item.isChecked = true
      } else {
        this.$common.xeUtils.remove(this.checkedList, (e) => e === item.id)
        item.isChecked = false
      }
    },
    getListAction() {
      const data = {
        pageNo: this.page.num,
        pageSize: 20,
        parent_id: this.route.parent_id,
        teacher_id: this.route.teacher_id,
        workers_id: this.route.workers_id,
        card_no: this.route.card_no,
        search: this.searchData.search,
        type: this.route.page_type,
      }
      getResidentList(data).then((ret) => {
        const data = ret.data
        if (data.errcode === 0) {
          this.dataList.push(...data.data.results)
          // 初始化选中状态
          this.dataList.forEach((item) => {
            this.$set(item, 'isChecked', false)
          })
          this.page.total = data.data.totalRecord
          this.page.num += 1
          if (data.data.pageNo >= data.data.totalPage) {
            this.finished = true
          }
        } else {
          this.errorLoading = true
        }
        this.loading = false
      })
    },
    onRefresh() {
      document.querySelector('html').scrollTop = '0'
      // 重置筛选数据
      this.checkedList = []
      // 清空列表数据
      this.finished = false
      this.refreshing = true
      // 重新加载数据
      this.loading = true
      this.page.num = 1
      this.onLoad()
    },
    onLoad() {
      // 异步更新数据
      // if (this.userInfo.cardNo) {
      if (this.refreshing) {
        this.dataList = []
        this.page.num = 1
        this.refreshing = false
      }
      this.getListAction()
      // } else {
      //   this.loading = false
      // }
    },
  },
}
</script>

<style lang='less' scoped>
.page {
  //padding: 10px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  color: black;
  position: relative;

  /deep/.van-search__content--round {
    border-radius: 10px;
  }
  /deep/.van-search__content {
    background-color: #fff;
  }

  &-search {
    width: 100%;

    &-option {
      border-radius: 10px;
      background-color: #ff9100;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      padding: 5px;
      margin-right: 10px;
      text-align: center;
      font-size: 16px;
      //color: #898989;
      color: #ffffff;
    }
  }

  &-list {
    box-sizing: border-box;
    width: 100%;
    height: 85vh;

    & > :not(:last-child) {
      border-bottom: 1px solid #ededed;
    }

    .item-active {
      box-shadow: 0px 0px 5px 3px rgba(255, 145, 0, 0.8);
      border: 1px solid #ff9100;
    }

    &-item {
      margin-bottom: 20px;

      &-inner {
        margin: 15px 10px;
        padding: 20px;
        min-height: 80px;
        text-align: left;
        border-radius: 20px;
        background: #fff;
        position: relative;
        overflow: hidden;
        border: 1px solid transparent;

        &-bottom {
          display: flex;
          justify-content: space-around;
          margin-top: 20px;

          &-btn {
            width: 90%;
            border-radius: 5px;
          }
        }

        .edit {
          position: absolute;
          right: -5px;
          top: -5px;
          background-color: #ff9100;
          border-bottom-left-radius: 20px;
          width: 40px;
          height: 40px;

          &-icon {
            margin-left: 7px;
            margin-top: 2px;
          }
        }

        .desc {
          margin-top: 10px;
          font-weight: 400;
          font-size: 20px;
          text-align: left;
          color: #b4b4b4;
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .tag {
    margin-left: 10px;
    padding: 2px 5px;
    width: auto;
    height: auto;
    font-size: 12px;
    border-radius: 3px;
    text-align: center;
    background: rgba(211, 211, 211, 0.5);
    border: 1px solid grey;
    color: grey;
  }
}
</style>
